<template>
  <!--大边框-->
  <div class="zhengti" style="overflow:auto;height: 600px;padding-right: 10px" >
    <el-button style="width: 30%">组织信息</el-button>
    <el-button style="width: 30%">修改组织</el-button>
    <el-button style="width: 30%">新增组织</el-button>

    <el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="auto" label-position="right" style="margin-top: 10px">

      <el-form-item label="党组织名称" style="width: 100%">
        <el-input v-model="dynamicValidateForm.name"></el-input>
      </el-form-item>

      <el-form-item label="上级组织">
        <el-select v-model="dynamicValidateForm.region" placeholder="请选择活动区域">
          <el-option label="雷甸镇党建" value="雷甸镇党建"></el-option>
          <el-option label="中兴社区党委" value="中兴社区党委"></el-option>
          <el-option label="和平村党总支" value="和平村党总支"></el-option>
          <el-option label="中兴社区一支部" value="中兴社区一支部"></el-option>
          <el-option label="中兴社区二支部" value="中兴社区二支部"></el-option>
          <el-option label="中兴社区三支部" value="中兴社区三支部"></el-option>

        </el-select>
      </el-form-item>

      <el-form-item label="组织简介">
        <el-input type="textarea" v-model="dynamicValidateForm.desc"></el-input>
      </el-form-item>


      <el-row   v-for="(domain, index) in dynamicValidateForm.domains"

                :key="domain.key"
                :prop="'domains.' + index + '.value'">
      <el-form-item label="组织领导姓名"


      >
        <el-input lable='lable1.one' v-model="domain.name" >组织领导姓名</el-input> </el-form-item>
        <el-form-item label="登录密码">
        <el-input v-model="domain.password"></el-input>
        </el-form-item>
        <el-form-item label="组织领导职务">
        <el-input v-model="domain.job"></el-input>
        </el-form-item>
        <!--<el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
        <el-button type="danger" icon="el-icon-delete" circle  style="display:block;margin:0 auto" @click.prevent="removeDomain(domain)"></el-button>
      </el-form-item>
      <el-form-item style="margin-top: 10px">
        <el-button type="primary" @click="submitForm('dynamicValidateForm')" style="width: 40%">提交</el-button>
        <el-button @click="addDomain" style="width: 45%">新增领导</el-button>

      </el-form-item>
      </el-row>
      <!--<div v-for="many in manys"  style="padding-top: 2px; padding-bottom: 2px">
      <el-form-item label="组织领导姓名">
        <el-input v-model="many.name" ></el-input>
      </el-form-item>
      <el-form-item label="组织领导职务" >
        <el-input v-model="many.job" ></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="many.number" ></el-input>
      </el-form-item>

          <el-button type="danger" icon="el-icon-delete" circle  style="display:block;margin:0 auto"></el-button>

        <el-form-item label="组织领导姓名">
          <el-input placeholder="例如张三">{{add1}}</el-input>
        </el-form-item>
        <el-form-item label="组织领导职务" >
          <el-input placeholder="例如中兴社区党委书记" >{{add2}}</el-input>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input placeholder="139XXXXXXXX" >{{add3}}</el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('dynamicValidateForm')">增加领导</el-button>

          <el-button @click="resetForm('dynamicValidateForm')">提交</el-button>
        </el-form-item>
      </div>-->





     <!-- <button @click="list ">组织信息</button>
      <button @click="update">修改组织</button>
      <button @click="add">新增组织</button>-->

   <!-- <div>
     <div> 党组织名称 <el-input v-model="dangformame" :disabled="true" style="width: 80%"></el-input></div>

&lt;!&ndash;下拉框&ndash;&gt;
      上级组织
      <el-select v-model="value" placeholder="请选择" style="width: auto">
        <el-option
          v-for="item in lastzuzhi"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

      &lt;!&ndash;大内容框&ndash;&gt;
    <div>组织简介 <input type="text" style="height:151px;width:300px"></div>

      &lt;!&ndash;循环显示的领导&ndash;&gt;
    </div>
      <div v-for="many in manys" class="li1" style="overflow: auto;height: 200px" >
        <div style="padding: 1px">
          <div> 组织领导姓名&nbsp<el-input placeholder="例如张三" style="width:60%">{{many.name}}</el-input><el-button type="danger" icon="el-icon-delete" circle></el-button></div>
          <div>组织领导职务&nbsp<el-input placeholder="例如中兴社区党委书记" style="width:80%">{{many.job}}</el-input></div>
          <div>手机号码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-input placeholder="139XXXXXXXX" style="width:80%">{{many.number}}</el-input></div>

          &lt;!&ndash;<button @click="shanchu">删除帐号</button>&ndash;&gt;

        </div>
      </div>

    &lt;!&ndash;添加领导的默认框&ndash;&gt;
    <div>
      <div> 组织领导姓名&nbsp<el-input placeholder="例如张三" style="width: 280px;">{{add1}}</el-input></div>
      <div>组织领导职务&nbsp<el-input placeholder="例如中兴社区党委书记" style="width: 280px;">{{add2}}</el-input></div>
      <div>手机号码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<el-input placeholder="139XXXXXXXX" style="width: 280px;">{{add3}}</el-input></div>

      <button @click="增加领导">增加领导</button>
    </div>

      <el-button  @click="tijiao" class="bt2">提交</el-button>
-->
  </el-form>
  </div>
</template>
<script>
    // import __ from '__' // __是需要手动引入的文件
    import Bus from '../bus.js'
    export default {
        name: '',
        components: {},
        data () {
          return {
              sos:'',
              label1:{
                  one:'组织领导职务',
                tuo:'登录密码',
                three:'组织领导职务'
              },
            dynamicValidateForm: {
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: '',
              domains: [{
                name: '',
                password: '',
                job: '',

              }],
              form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
              },
              userForm: '',
              seachVue: '',
              checked: '',
              dangformame: '',
              buttonName: '',
              dialogVisible: false,
              add1: '',
              add2: '',
              add3: '',
              msg: '这个是Home模板页',
              lastzuzhi: [
                {
                  value: '雷甸镇党建',
                  label: '雷甸镇党建'
                },
                {
                  value: '中兴社区党委',
                  label: '中兴社区党委'
                },
                {
                  value: '和平村党总支',
                  label: '和平村党总支'
                },
                {
                  value: '中兴社区一支部',
                  label: '中兴社区一支部'
                },
                {
                  value: '中兴社区二支部',
                  label: '中兴社区二支部'
                },
                {
                  value: '中兴社区三支部',
                  label: '中兴社区三支部'
                },
              ],
              manys: [
                {
                  name: '1',
                  job: '1',
                  number: '1'
                },
              ],
              addall: {
                name: '',
                job: '',
                number: '1'
              }
            }
          }
        },



        methods: {
            submitForm(formName) {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  alert('submit!');
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            },
            resetForm(formName) {
              this.$refs[formName].resetFields();
            },
            removeDomain(item) {
              var index = this.dynamicValidateForm.domains.indexOf(item)
              if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1)
              }
            },
            addDomain() {
              this.dynamicValidateForm.domains.push({
                value: '',
                key: Date.now()
              });
            }
          /*  //删除方法
          shanchu(key){
            this.manys.splice(key,1)
          },
          /!* 添加manys合，*!/
          addlingdao(){
            addall.name=add1,
              addall.job=add2,
              addall.number=add3,
              manys.add(addall)
          },*/


        /*  dialogFormAction(){
            console.log(this.manys);
            console.log(this.manys+"==============");

            this.loading = true;
            this.addPost(this.manys);

          },
          addPost: function(manys){
            var _this = this;
            this.$http.post(
              this.$BASE_URL+'user/add',
              {"params":userForm},{emulateJSON:false}).then(function(res){
              if(res.body > 0){
                _this.manys("manys");
                _this.loading = false;
                _this.buttonName = "确定";
                _this.dialogVisible=false;
                _this.userPost(_this.currentPage1);
                _this.$message.success('添加成功！');
              }else{
                _this.$message.error('添加失败！');
              }
            },function(res){
              console.log(res.status);
            });
          },*/
        }
    }
</script>
<style lang="postcss" scoped>
body {

}

  div{
    margin-top: 2px;
  }
  .bt1,.bt2{
    /*margin-top: 20px;*/
  }


</style>
